
<template>
    <vo-table ref="yuTable" :data="data.tableData.data" :cols="data.tableData.cols" :rowClassName="rowClassName" :config="data.tableData.config" @fetch-data="query" @vue:mounted="query"  >
      <template #leftBar>
        <tiny-input v-model="data.searchData.jobId" placeholder="任务ID"></tiny-input>
        <tiny-input v-model="data.searchData.instanceId" placeholder="任务实例ID"></tiny-input>
        <!-- <tiny-input v-model="data.searchData.status" placeholder="任务实例ID"></tiny-input> -->
        <vo-select default select dictCode="powerJobRunType" v-model:value="data.searchData.status"  />
        <tiny-button  size="small" ghost type="info" @click="query" ><vo-icon iconName="sousuo"  ></vo-icon>查询</tiny-button>
        </template>
        <template v-slot:statusSlot="{row}">
            <span v-if="row.status=='5'">正常</span>
            <span v-else-if="row.status=='4'">失败</span>
            <span v-else-if="row.status=='10'">手动停止</span>
          </template>

        <template v-slot:handleSlot="{row}">
            <tiny-button-group class="ml-4">
                <tiny-button ghost type="success" size="mini"  @click="detail(row)">详情</tiny-button>
                <tiny-button ghost type="info" size="mini" @click="log(row)">日志</tiny-button>
                <tiny-button ghost type="warning" size="mini" @click="retryBtn(row)">重试</tiny-button>
                <tiny-button ghost type="danger" size="mini" @click="jobStop(row)">停止</tiny-button>
             </tiny-button-group>
      </template>
           
    </vo-table>
    <tiny-dialog-box  v-model:visible="data.log.isShow" title="日志详情" width="60%">
      <div v-html="data.log.ds.data" style="white-space: pre-line;" class="detail-form"></div>
    </tiny-dialog-box>
    <tiny-dialog-box v-model:visible="data.detail.isShow" center title="任务详情" width="60%" >
      <tiny-form :display-only="true" label-width="120px" size="mini" class="detail-form">
        <tiny-form-item label="任务实例ID" >
              <tiny-input v-model="data.detail.instanceId" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="状态" >
              <tiny-input v-model="data.detail.ds.status" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="运行次数" >
              <tiny-input v-model="data.detail.ds.runningTimes" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="执行服务地址" >
              <tiny-input v-model="data.detail.ds.taskTrackerAddress" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="预计执行时间" >
              <tiny-input v-model="data.detail.ds.expectedTriggerTime" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="开始时间" >
              <tiny-input v-model="data.detail.ds.actualTriggerTime" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="结束时间" >
              <tiny-input v-model="data.detail.ds.finishedTime" type="text" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="节点参数" >
              <tiny-input v-model="data.detail.ds.instanceParams" type="textarea" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="任务实例参数" >
              <tiny-input v-model="data.detail.ds.jobParams" type="textarea" placeholder="英文"></tiny-input>
          </tiny-form-item>
        <tiny-form-item label="任务结果" >
              <tiny-input v-model="data.detail.ds.result" type="textarea" placeholder="英文"></tiny-input>
          </tiny-form-item>
      </tiny-form>
    </tiny-dialog-box>
</template>
<script setup>
  import {reactive, ref, getCurrentInstance,onMounted} from 'vue';  
  import { TinyDialogBox  ,Modal} from '@opentiny/vue'
  const yuTable = ref(null);
  const {proxy} = getCurrentInstance();
  import {cosSystem} from '@/stores/system.js';
  let store = cosSystem();
  import { useRoute } from 'vue-router';
  const route = useRoute();


  onMounted(()=>{
      if(!store.getAppId){
        Modal.message({ message: '请先选择一个应用', status: 'warning' })
        proxy.$router.push({path:'/sys/powerJob/app'});
      }

      const id = route.query.jobId; // 获取 query 中的 id 参数
      if(id){
        data.searchData.jobId = id;
      }
      data.searchData.appId = store.getAppId;
  })
  const data = reactive({
    log:{ ds:{},isShow:false},
    detail:{ ds:{},isShow:false},
    tableData: {  data: {}, cols: [],  config: {} },
    searchData: {  appId: '1',  instanceId: '',  status: '',type:'NORMAL',index: 0,pageSize: 10},

  })
  data.tableData.data = [{dictCode: '123', dictName: '123'}]
  data.tableData.cols = [
    {type: 'index',title: '序号'},
    {title: '任务ID', key: 'jobId', align: 'left'},
    {title: '任务名称', key: 'jobName', align: 'left'},
    {title: '任务实例ID', key: 'instanceId', align: 'left'},
    {title: '执行服务地址', key: 'taskTrackerAddress', align: 'left'},
    {title: '状态', key: 'status', align: 'left', slot: 'statusSlot'},
    {title: '触发时间', key: 'actualTriggerTime', align: 'left'},
    {title: '结束时间', key: 'finishedTime', align: 'left',},
    { title: '操作', align: 'center',width:'300px', slot: 'handleSlot',  },
]
/** 查询 */
const query = ()=>{
    data.searchData.index = yuTable.value.page().currentPage-1;
    data.searchData.pageSize = yuTable.value.page().pageSize;
  proxy.$api.taskJob.jobTaskInstanceList(data.searchData).then(res=>{
     data.tableData.data = res

  })
}

const jobStop = (row)=>{
  let params = {
    instanceId:row.instanceId,
    appId:store.getAppId
  } 
  proxy.$api.taskJob.jobStop(params).then(res=>{
    if(res.success){
      Modal.message({status:'success', message: "停止成功"});
      query(); 
    } else {
      Modal.message({status:'error', message: "停止失败"});
    }
  })
}
/** 重试 */
const retryBtn = (row)=>{
  let params = {
    instanceId:row.instanceId,
    appId:store.getAppId
  } 
  proxy.$api.taskJob.jobRetry(params).then(res=>{
    if(res.success){
      Modal.message({status:'success', message: "重试成功"});
      query(); 
    }
  })
}
/** 日志 */
const log = (row)=>{

  let params={
    instanceId:row.instanceId,
    index: 0,
    appId:data.searchData.appId
  }
  proxy.$api.taskJob.jobTaskInstanceLog(params).then(res=>{
    data.log.ds = res.data;
  })
  data.log.isShow=true;
}
// 详情
const detail = (row)=>{
  data.detail.instanceId = row.instanceId;
  let params={
    instanceId:row.instanceId
  }
  proxy.$api.taskJob.jobTaskInstanceDetail(params).then(res=>{
    data.detail.ds = res.data;
  })

  data.detail.isShow=true;
}

// 行颜色渲染
const rowClassName = ({ rowIndex,row }) => {
  if(row.status=='5'){
    return 'row__word--success'
  }
  if(row.status=='4'){
    return 'row__word--stop'
  }
  if(row.status=='10'){
    return 'row__word--warning'
  }

 
}

</script>
<style>
.row__word--success {
  color: var(--tv-base-color-success-6);
}
.row__word--warning {
  color: var(--tv-base-color-warn-6);
}
.row__word--stop {
  color: var(--tv-base-color-error-6);
}

</style>


<style lang="scss" scoped>
.detail-form{
  min-height: 350px;
  overflow-y: auto;
}

</style>